<template>
    <h1>资讯审核中心</h1>
    <el-select v-model="pageConfig.type" style="margin-bottom : 1rem" placeholder="Select">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>
    <el-table :row-class-name="tableRowClassName" :highlight-current-row="true" :data="list" style="width: 100%">

        <el-table-column prop="title" label="标题" />
        <el-table-column prop="user" label="发布者" />
        <el-table-column label="发布日期">
            <template #default="scope">
                {{formatDate(scope.row.date) }}
            </template>
        </el-table-column>

        <el-table-column label="内容">
            <template #default="scope">
                <span class="content"> {{scope.row.content}}</span>
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template #default="scope">
                <el-button type="primary" style="width:auto;padding:0" text @click="handleClick(scope.row)">审核
                </el-button>
                <el-button type="primary" style="width:auto;padding:0" text @click="handleClick1(scope.row)">维护
                </el-button>
            </template>
        </el-table-column>

    </el-table>

    <div class="center">
        <el-pagination background layout="prev, pager, next" v-model:current-page="pageConfig.page"
            :total="pageConfig.count" :page-size="pageConfig.size" :current-change="handlePageChange" />
    </div>
</template>

<script lang="ts" setup>
import LabelTitle from "@/components/LabelTitle/index.vue"
import { ref, watch } from "vue"
import { useRouter } from "vue-router"
import { announcementListApi } from "../../../../api/a"
import { delay, responseCallback } from "../../../../utils"
import { formatDate } from "../../../../utils/date"
const tableRowClassName = ({
    row,
    rowIndex,
}) => {
    if (rowIndex % 2 === 1) {
        return 'primary'
    } else {
        return 'success'
    }
    return ''
}
const options = ref([{
    label: "未审核",
    value: 2
}, {
    label: "审核通过",
    value: 1
}, {
    label: "审核未通过",
    value: 0
}])

const list = ref([]);
const router = useRouter();
const pageConfig = ref({
    page: 1,
    size: 10,
    count: 0,
    type: 2,
})
function handlePageChange(page) {
    pageConfig.value.page = page;
}
responseCallback({
    promise: announcementListApi(undefined, {
        ...pageConfig.value
    }),
    cb(data: any) {
        list.value = data.list;
        pageConfig.value.count = data.count
    }

})

watch(pageConfig.value, async () => {
    responseCallback({
        promise: announcementListApi(undefined, {
            ...pageConfig.value
        }),
        cb(data: any) {
            list.value = data.list;
            pageConfig.value.count = data.count
        }

    })
});

const handleClick = (item) => {
    router.push({
        name: "AnnouncementVerifyDetail",
        params: {
            id: item.id
        }
    })
}
const handleClick1 = (item) => {
    router.push({
        name: "AnnouncementChange",
        params: {
            id: item.id
        }
    })
}

</script>

<style lang="less" scoped>
h1 {
    color: #333;
    text-align: center;
    font-size: 28px;
    margin-bottom: 2rem;
}

img {
    display: inline-block;
}

.content {
    width: 100%;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/deep/.el-table__row.primary {
    background: #e6f7ff;
    border-radius: 10px;
}

/deep/.el-table__row.success {
    background: #fff;
}

.center {
    display: flex;
    margin-top: 2rem;
    justify-content: center;
}
</style>